<template>

  <div class="container">
   <category title="游戏">
    <template slot-scope="{games}">
      <ul >
       <li v-for="(game,index) in games" :key="index">{{game}}</li>
     </ul>
    </template>
   </category>
    <category title="游戏">
    <template slot-scope="{games}">
      <ol>
       <li v-for="(game,index) in games" :key="index">{{game}}</li>
     </ol>
    </template>
   </category>
    <category title="游戏">
    <template slot-scope="{games}">
       <h4 v-for="(game,index) in games" :key="index">{{game}}</h4>
    </template>
   </category>
  </div>

</template>

<script>
import category from './components/Category.vue'
export default {
  name: "App",
  components:{category},
};
</script>

<style>
/*base*/
.container,.foot {
  display: flex;
  justify-content: space-around;
}
h4 {
  text-align: center;
}
</style>